<template>
  <div class="myAddress">
    <Header :is-left="true" :title="title" />

    <!-- 显示收货地址 -->
    <div class="address-view">
      <div v-for="(address,index) in allAddress" :key="index" class="address-card">
        <div class="address-card-select">
          <i v-if="selectIndex == index" class="fa fa-check-circle" />
        </div>

        <div class="address-card-body" @click="setAddressInfo(address,index)">
          <div>{{ address.id }}</div>
          <p class="address-card-title">
            <span class="username">{{ address.name }}</span>
            <span v-if="address.sex" class="gender">{{ address.sex }}</span>
            <span class="phone">{{ address.phone }}</span>
          </p>
          <p class="address-card-address">
            <span v-if="address.tag" class="tag">{{ address.tag }}</span>
            <span class="address-text">{{ address.address }}</span>
          </p>
        </div>
        <div class="address-card-edit">
          <i class="fa fa-edit" @click="handleEdit(address)" />
          <i class="fa fa-close" @click="handleDelete(address,index)" />
        </div>
      </div>
    </div>

    <!-- 新增收货地址 -->
    <div class="address-view-bottom" @click="addAddress">
      <i class="fa fa-plus-circle" />
      <span>新增收货地址</span>
    </div>
  </div>
</template>

<script>
import Header from '../../components/Header'
export default {
  name: 'MyAddress',
  components: {
    Header
  },
  data() {
    return {
      title: '我的地址',
      allAddress: [],
      selectIndex: 0
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => vm.getData())
  },
  methods: {
    addAddress() {
      this.$router.push({
        name: 'addAddress',
        params: {
          title: '添加地址',
          addressInfo: {
            name: '',
            id: '',
            sex: '',
            phone: '',
            address: '',
            address_detail: '',
            tag: ''
          }
        }
      })
    },
    getData() {
      if (this.$store.state.alladdress && this.$store.state.alladdress.length > 0) {
        this.allAddress = this.$store.state.alladdress
      } else {
        this.$axios(`https://www.fastmock.site/mock/cab80e667fc295aa088c1da19973bb87/ele/address`).then(res => {
          console.log(res.data)
          this.allAddress = res.data
          this.$store.dispatch('setaddresss', this.allAddress)
          console.log(this.$store.state.alladdress)
        })
      }
    },
    handleEdit(address) {
      this.$router.push({
        name: 'addAddress',
        params: {
          title: '编辑地址',
          addressInfo: address
        }
      })
    },
    handleDelete(address, index) {
      // this.$axios
      //   .delete(`/api/user/address/${localStorage.ele_login}/${address._id}`)
      //   .then(res => {
      //     this.allAddress.splice(index, 1);
      //   });
      this.allAddress.splice(index, 1)
      this.$store.dispatch('setaddresss', this.allAddress)
    },
    setAddressInfo(address, index) {
      this.selectIndex = index
      // 将address对象存储到vuex
      this.$store.dispatch('setUserInfo', address)
      this.$router.push('/settlement')
    }
  }
}
</script>

<style scoped>
.myAddress {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 45px;
}

.address-view-bottom {
  position: fixed;
  height: 13.866667vw;
  bottom: 0;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 0.266667vw solid #ddd;
  color: #3190e8;
  font-size: 1rem;
}
.address-view-bottom > i {
  font-size: 1.3rem;
  margin-right: 8px;
}

.address-view {
  height: 100%;
  overflow-y: auto;
  padding-bottom: 13.866667vw;
}
.address-card {
  background-color: #fff;
  padding: 4vw;
  border-bottom: 1px solid #ddd;
  display: flex;
  min-height: 18.133333vw;
}
.address-card-body {
  flex: 1;
  overflow: hidden;
}
.address-card-title {
  font-size: 1rem;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 1.066667vw;
}
.address-card-title .username {
  color: #333;
  font-weight: 700;
}
.address-card-title .gender {
  padding: 0 1.6vw 0 0.8vw;
}
.address-card-address {
  color: #666;
  font-size: 0.84rem;
  display: flex;
  align-items: center;
}
.address-card-address .tag {
  display: inline-block;
  position: relative;
  margin-right: 0.8vw;
  padding: 0.533333vw;
  color: #ff5722;
  white-space: nowrap;
  border: 1px solid #ff5722;
  border-radius: 0.133333vw;
  font-size: 0.6rem !important;
  line-height: 2.666667vw;
}
.address-text {
  line-height: 4.533333vw;
}

/* 编辑和删除 */
.address-card-edit {
  flex-basis: 13.066667vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.address-card-edit > i {
  color: #aaa;
  font-size: 1.2rem;
}

/*  选中图标 */
.address-card-select {
  flex-basis: 7.333333vw;
  min-width: 7.333333vw;
  display: flex;
  align-items: center;
}
.address-card-select > i {
  font-size: 1.5rem;
  color: #4cd964;
}
</style>
